<html>
    <head>
        <script src="../resources/testharness.js"></script>
        <script src="../resources/testharnessreport.js"></script>
        <script src="media-file.js"></script>
        <script src="video-paint-test.js"></script>
        <style>
            video { width:200px; border: 3px solid red; -webkit-box-reflect: below 5px; }
        </style>
    </head>
    <body>
        <p>Test dynamic removal of transformed and reflected video </p>
        &nbsp;<video id="one" style="transform:rotate(20deg)"></video><br>
        &nbsp;<video class="otherVids" style="transform:scale(0.5)"></video><br>
        &nbsp;<video class="otherVids" style="transform:skew(20deg)"></video><br>
        <script>
            var videos = Array.from(document.getElementsByClassName("otherVids"));
            var presentationPromise =
                Promise.all(videos.map(video => videoPresentationPromise(video)));

            setSrcByTagName('video', 'content/test.ogv');
            document.body.removeChild(document.getElementById('one'));
            document.body.offsetLeft;
            async_test(t => {
                presentationPromise.then(() => t.done());
            });
        </script>
    </body>
</html>
